<template>
    <div class="mobile-config pro">
        <div v-for="(item, key) in rCom" :key="key">
            <component :is="item.components.name" :configObj="configObj" ref="childData" :configNme="item.configNme"
                :key="key" @getConfig="getConfig" :index="activeIndex" :number="num" :num="item.num"></component>
        </div>
        <rightBtn :activeIndex="activeIndex" :configObj="configObj"></rightBtn>
    </div>
</template>

<script>
import toolCom from '@/components/mobileConfigRight/index.js'
import { mapState } from 'vuex'
import rightBtn from '@/components/rightBtn/index.vue';
export default {
    name: 'c_card_tag',
    componentsName: 'card_tag',
    cname: '滚动标签',
    props: {
        activeIndex: { type: null },
        num: { type: null },
        index: { type: null }
    },
    components: {
        ...toolCom,
        rightBtn
    },
    data() {
        return {
            configObj: {},
            rCom: [
                { components: toolCom.c_set_up, configNme: 'setUp' }
            ]
        }
    },
    watch: {
        'configObj.setUp.tabVal': {
            handler(nVal) {
                const arr = [{ components: toolCom.c_set_up, configNme: 'setUp' }];
                if (nVal === '0') {
                    // 内容设置
                    const contentArr = [
                        { components: toolCom.c_input_item, configNme: 'tagList' },
                        { components: toolCom.c_input_number, configNme: 'scrollSpeed' }
                    ];
                    this.rCom = arr.concat(contentArr);
                } else {
                    // 样式设置
                    const styleArr = [
                        { components: toolCom.c_bg_color, configNme: 'tagBgColor' },
                        { components: toolCom.c_bg_color, configNme: 'tagTextColor' },
                        { components: toolCom.c_slider, configNme: 'tagRadius' },
                        { components: toolCom.c_slider, configNme: 'tagSize' },
                        { components: toolCom.c_slider, configNme: 'tagPadding' },
                        { components: toolCom.c_slider, configNme: 'tagHoriPadding' },
                        { components: toolCom.c_bg_color, configNme: 'containerBgColor' },
                        { components: toolCom.c_slider, configNme: 'width' },
                        { components: toolCom.c_slider, configNme: 'verticalPadding' },
                        { components: toolCom.c_slider, configNme: 'horizontalPadding' }
                    ];
                    this.rCom = arr.concat(styleArr);
                }
            },
            immediate: true
        },
        num(nVal) {
            let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[nVal]))
            this.configObj = value;
        },
        configObj: {
            handler(nVal) {
                this.$store.commit('mobildConfig/UPDATEARR', { num: this.num, val: nVal });
            },
            deep: true
        }
    },
    mounted() {
        this.$nextTick(() => {
            let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[this.num]))
            this.configObj = value;
        })
    },
    methods: {
        getConfig(data) {
            // 配置变更处理逻辑
        }
    }
}
</script>

<style scoped lang="scss">
.pro {
    padding: 15px 15px 0;

    .tips {
        height: 50px;
        line-height: 50px;
        color: #999;
        font-size: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .btn-box {
        padding-bottom: 20px;
    }
}
</style>